<div ng-controller="mqttTestCtrl">

    <div class="row">
        <div class="col-md-3" ng-hide="!showselect">
            <uib-accordion close-others="oneAtATime">
            <uib-accordion-group ng-repeat=" groupcfg in sgroups" heading="{{groupcfg.group}}" is-open="status.open">
                <uib-accordion-heading>
                    {{groupcfg.group}} <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': status.open, 'glyphicon-chevron-right': !status.open}"></i>
                </uib-accordion-heading>
                   <div class="input-group " ng-repeat="item in groupcfg.cfgs">

                       <a href="javascript:void(0)" class="form-control"  ng-click="changeCfg(item.id)">{{item.name}}</a>
                     <span class=" input-group-addon">  <span class=" glyphicon glyphicon-remove " ng-click="delCfg(item.id)"></span></span>
                   </div>


            </uib-accordion-group>

                </uib-accordion>
        </div>
        <div class="col-md-{{!showselect?12:9}}">
            <div class="panel panel-default panel-full">

                <div class="panel-heading">服务器配置</div>
                <div class="panel-body">
                    <div class="row">
                        <div class="col-md-4">
                            <p class="input-group" uib-popover="连接的服务器主机" popover-trigger="mouseenter">
                                <span class="input-group-addon"><label>主机</label></span>
                                <input type="text" class="form-control" ng-model="host" placeholder="服务器主机">
                            </p>
                        </div>
                        <div class="col-md-4">
                            <p class="input-group" uib-popover="连接的服务器端口" popover-trigger="mouseenter">
                                <span class="input-group-addon"><label>端口</label></span>
                                <input type="text" class="form-control" ng-model="port" placeholder="端口">
                            </p>
                        </div>
                        <div class="col-md-4">
                            <p class="input-group" uib-popover="路径" popover-trigger="mouseenter">
                                <span class="input-group-addon"><label>路径</label></span>
                                <input type="text" class="form-control" ng-model="path" placeholder="路径">
                            </p>
                        </div>

                    </div>
                    <div class="row">
                        <div class="col-md-4">
                            <p class="input-group" uib-popover="用户标志" popover-trigger="mouseenter">
                                <span class="input-group-addon"><label>uid</label></span>
                                <input type="text" class="form-control" ng-model="uid" placeholder="用户标志">
                            </p>
                        </div>
                        <div class="col-md-4">
                            <p class="input-group" uib-popover="用户名" popover-trigger="mouseenter">
                                <span class="input-group-addon"><label>用户</label></span>
                                <input type="text" class="form-control" ng-model="username" placeholder="用户名">
                            </p>
                        </div>
                        <div class="col-md-4">
                            <p class="input-group" uib-popover="密码" popover-trigger="mouseenter">
                                <span class="input-group-addon"><label>密码</label></span>
                                <input type="text" class="form-control" ng-model="pwd" placeholder="密码">
                            </p>
                        </div>

                    </div>
                    <div class="row">

                        <div class="col-md-6">
                            <p class="input-group" uib-popover="密码" popover-trigger="mouseenter">
                                <span class="input-group-addon"><label>选项</label></span>
                        <span class=" form-control-static">
                        <button type="button" class="btn btn-default" ng-model="clearSession" uib-btn-checkbox
                                btn-checkbox-true="1" btn-checkbox-false="0">
                            清理会话
                        </button>

                        <button type="button" class="btn btn-default" ng-model="debug" uib-btn-checkbox
                                btn-checkbox-true="1"
                                btn-checkbox-false="0">
                            debug
                        </button>

                        <button type="button" class="btn btn-default" ng-model="antServerAuth" uib-btn-checkbox
                                btn-checkbox-true="1" btn-checkbox-false="0">
                            antServer认证
                        </button>
                            </span>
                            </p>

                        </div>
                    </div>
                    <div class="row" ng-hide="connected">
                        <div class="col-md-12">
                            <div class="input-group">

                                <span class="input-group-addon"><label>收到消息</label></span>
                                <textarea class="form-control" ng-model="recvmsg" rows="10" cols="100"></textarea>
                            </div>

                        </div>
                    </div>
                </div>

                <div class="panel-footer">
                    <button type="button" class="btn {{connbtnclass}}" ng-model="debug" ng-click="connect()"
                            ng-hide="connected">
                        连接服务器
                    </button>
                    <button class="btn btn-danger " type="button" ng-click="disconnect()" ng-hide="!connected">
                        断开
                    </button>

                    <button class="btn btn-success " type="button" ng-click="saveTo()">
                        保存配置
                    </button>
                </div>
            </div>
            <div class="row" ng-hide="!connected">
                <div class="col-md-6">

                    <div class="panel panel-default panel-full">
                        <!-- Default panel contents -->
                        <div class="panel-heading">发送信息</div>
                        <div class="panel-body">
                            <form class="form-group">
                                <div class="row">
                                    <div class="col-md-12">
                                        <p class="input-group" uib-popover="输入要发送的主题" popover-trigger="mouseenter">
                                            <span class="input-group-addon"><label>发布主题</label></span>
                                            <input type="text" class="form-control" ng-model="topic"
                                                   placeholder="客户端标志">
                                        </p>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-6">
                                        <p class="input-group">
                                            <span class="input-group-addon"><label>服务质量</label></span>
                                            <select ng-model="qos" class="form-control">
                                                <option value="0">QoS0</option>
                                                <option value="1">QoS1</option>
                                                <option value="2">QoS2</option>
                                            </select>
                                        </p>
                                    </div>
                                    <div class="col-md-6">
                                        <p class="input-group">
                                            <span class="input-group-addon"><label>保留标志</label></span>
                                            <select ng-model="retain" class="form-control">
                                                <option value="0">不保留</option>
                                                <option value="1">保留</option>
                                            </select>
                                        </p>
                                    </div>
                                </div>
                                <div class="row">

                                    <div class="col-md-12">
                                        <p class="input-group">
                                            <span class="input-group-addon"><label>有效载荷</label></span>
                                    <textarea class="form-control" ng-model="sendpayload" rows="15"
                                              cols="100"></textarea>

                                        </p>
                                    </div>

                                </div>
                                <div class="row">
                                    <div class="col-md-12">
                                        <button class="btn btn-success " type="button" ng-click="sendmsg()">
                                            发送
                                        </button>

                                    </div>

                                </div>
                                <div class="row">
                                    <div class="col-md-12">
                                        <!-- Table -->
                                        <p class="msg">{{returnmsg}}</p>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">

                    <div class="panel panel-default panel-full">
                        <div class="panel-heading">订阅信息</div>
                        <div class="panel-body">

                            <form class="form-group">
                                <p class="input-group" uib-popover="输入订阅的主题过滤器" popover-trigger="mouseenter">
                                    <span class="input-group-addon"><label>订阅主题</label></span>
                                    <input type="text" class="form-control" ng-model="subtopic" placeholder="客户端标志">
                                </p>

                                <p class="input-group">
                                    <span class="input-group-addon"><label>服务质量</label></span>
                                    <select ng-model="subqos" class="form-control">
                                        <option value="0">QoS0</option>
                                        <option value="1">QoS1</option>
                                        <option value="2">QoS2</option>
                                    </select>
                                </p>

                                <p class="input-group">
                                    <span class="input-group-addon"><label>收到消息</label></span>
                                    <textarea class="form-control" ng-model="recvmsg" rows="15" cols="100"></textarea>

                                </p>
                                <p class="input-group">
                                    <button class="btn btn-primary " type="button" ng-click="subscribe()">
                                        订阅
                                    </button>


                                    <button type="button" class="btn btn-primary" ng-click="emptyrecv()">
                                        清空
                                    </button>

                                </p>
                                <p class="input-group">

                                    <label class="btn btn-info" ng-repeat="sub in sublist track by $index"
                                           ng-model="aa[sub.topic]" ng-click="quicksub(sub.topic,sub.qos)"
                                           uib-btn-checkbox="true">
                                        {{sub.topic}} [{{sub.qos}}]
                                    </label>


                                </p>
                            </form>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
    <script type="text/ng-template" id="saveModalContent.html">
        <div class="modal-header">
            <h3 class="modal-title">保存消息</h3>
        </div>
        <div class="modal-body">
            <form class="form-group">
                <p class="input-group" uib-popover="输入要保存的名字" popover-trigger="mouseenter">
                    <span class="input-group-addon"><label>主题</label></span>
                    <input type="text" class="form-control" ng-model="name" placeholder="名字">
                </p>
                <div class="input-group">
                    <span class="input-group-addon"><label>分组</label></span>
                    <input type="text" class="form-control" ng-model="group" placeholder="输入新分组">
                    <div class="input-group-btn" uib-dropdown>
                        <button id="split-button" type="button" class="btn btn-default">以存在</button>
                        <button type="button" class="btn btn-default" uib-dropdown-toggle>
                            <span class="caret"></span>
                            <span class="sr-only">Split button!</span>
                        </button>
                        <ul uib-dropdown-menu role="menu" aria-labelledby="split-button">

                            <li role="menuitem" ng-repeat="g in sgroups track by $index">
                                <a href="javascript:void(0)" ng-click="chggroup(this)">{{g}}</a>
                            </li>
                        </ul>
                    </div>

                </div><!-- /input-group -->


            </form>

        </div>
        <div class="modal-footer">
            <button class="btn btn-primary" type="button" ng-click="ok()">OK</button>
            <button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>
        </div>
    </script>


</div>